<template>
	<div class="api-create">
		<el-card class="box-card">
			<div slot="header" class="clearfix">
				<span>接口数据管理</span>
			</div>

			<el-button size="small" type="primary" @click="openadd"
				>添加接口</el-button
			>
			<br /><br />
			<el-table :data="tableData" border style="width: 100%">
				<el-table-column fixed prop="_id" label="API ID"> </el-table-column>
				<el-table-column prop="apiname" label="接口名称"> </el-table-column>
				<el-table-column label="数据类型">第三方数据库</el-table-column>
				<el-table-column prop="ip" label="数据库IP地址"> </el-table-column>
				<el-table-column prop="port" label="数据库端口号"> </el-table-column>
				<el-table-column prop="uname" label="数据库用户名"> </el-table-column>
				<el-table-column label="数据库密码">******</el-table-column>
				<el-table-column prop="sqlname" label="数据库名"> </el-table-column>
				<el-table-column prop="sqltable" label="表名"> </el-table-column>
				<el-table-column
					prop="data"
					label="最后一次编辑时数据预览"
					show-overflow-tooltip
				>
				</el-table-column>
				<el-table-column prop="time" label="创建时间"> </el-table-column>
				<el-table-column fixed="right" label="操作" width="100">
					<template slot-scope="scope">
						<el-button type="text" size="small" @click="openedit(scope.row)"
							>编辑</el-button
						>
						<el-button type="text" size="small" @click="setdelete(scope.row)"
							>删除</el-button
						>
					</template>
				</el-table-column>
				<!-- <el-table-column prop="zip" label="邮编"> </el-table-column> -->
			</el-table>
		</el-card>

		<el-dialog
			class="dialog"
			title="添加接口"
			:visible.sync="dialogVisible"
			width="500px"
		>
			<el-form
				ref="searchForm"
				:model="apiForm"
				:rules="rules"
				label-width="auto"
				:inline="true"
			>
				<el-form-item label="接口名称：" prop="apiname">
					<el-input
						v-model="apiForm.apiname"
						placeholder="请输入接口名称"
						clearable
						class="search_input"
						:disabled="state == 'edit'"
					>
					</el-input>
				</el-form-item>
				<el-form-item label="数据库ip地址：" prop="ip">
					<el-input
						v-model="apiForm.ip"
						placeholder="请输入接口名称"
						clearable
						class="search_input"
					></el-input>
				</el-form-item>
				<el-form-item label="数据库端口号：" prop="port">
					<el-input
						v-model="apiForm.port"
						placeholder="请输入接口名称"
						clearable
						class="search_input"
					></el-input>
				</el-form-item>
				<el-form-item label="数据库用户名：" prop="uname">
					<el-input
						v-model="apiForm.uname"
						placeholder="请输入接口名称"
						clearable
						class="search_input"
					></el-input>
				</el-form-item>
				<el-form-item label="数据库密码：" prop="upass">
					<el-input
						v-model="apiForm.upass"
						placeholder="请输入接口名称"
						clearable
						class="search_input"
					></el-input>
				</el-form-item>
				<el-form-item label="数据库名" prop="sqlname">
					<el-input
						v-model="apiForm.sqlname"
						placeholder="请输入接口名称"
						clearable
						class="search_input"
					></el-input>
				</el-form-item>
				<el-form-item label="表名" prop="sqltable">
					<el-input
						v-model="apiForm.sqltable"
						placeholder="请输入接口名称"
						clearable
						class="search_input"
					></el-input>
				</el-form-item>
			</el-form>
			<span slot="footer" class="dialog-footer">
				<el-button @click="reload()" size="small">取 消</el-button>
				<el-button
					type="primary"
					@click="setapi"
					:disabled="!hadtest"
					size="small"
					>确 定</el-button
				>
				<el-button type="success" @click="testapi" size="small"
					>测试连接</el-button
				>
			</span>
		</el-dialog>
	</div>
</template>
<script>
const config = require("../../../config");

export default {
	name: "apiCreate",
	data() {
		return {
			dialogVisible: false,
			tableData: [],
			apiForm: {
				apiname: "/test/1",
				ip: "172.20.20.79",
				port: "27017",
				uname: "chenpengyu",
				upass: "chenpengyu%40123",
				sqlname: "largescreendb",
				sqltable: "apidatatest",
				state: "add",
			},
			hadtest: false,
			sqloptions: [
				{
					value: "dataformDB1",
					label: "LargescreenV1:dataformDB1",
				},
				{
					value: "dataformDB2",
					label: "LargescreenV1:dataformDB2",
				},
			],
			ipoptions: [
				{
					value: config.db.servername,
					label: config.db.servername,
				},
			],
			rules: {
				apiname: [
					{
						required: true,
						message: "请输入接口地址",
						trigger: ["change", "blur"],
					},
				],
				ip: [
					{
						required: true,
						message: "请输入ip地址",
						trigger: ["change", "blur"],
					},
				],
				port: [
					{
						required: true,
						message: "请输入端口号",
						trigger: ["change", "blur"],
					},
				],
				uname: [
					{
						required: true,
						message: "请输入数据库用户名",
						trigger: ["change", "blur"],
					},
				],
				upass: [
					{
						required: true,
						message: "请输入数据库密码",
						trigger: ["change", "blur"],
					},
				],
				sqlname: [
					{
						required: true,
						message: "请输入数据库名称",
						trigger: ["change", "blur"],
					},
				],
				sqltable: [
					{
						required: true,
						message: "请输入读取的数据表",
						trigger: ["change", "blur"],
					},
				],
			},
		};
	},
	mounted() {
		this.init();
	},
	methods: {
		init() {
			this.getapilist();
		},
		reload() {
			this.hadtest = false;
			this.dialogVisible = false;
			//this.apiForm={}
		},
		openadd() {
			this.dialogVisible = true;
			this.state = "add";
		},
		openedit(row) {
			console.log(row);
			this.apiForm = {
				apiname: row.apiname,
				ip: row.ip,
				port: row.port,
				uname: row.uname,
				upass: "",
				sqlname: row.sqlname,
				sqltable: row.sqltable,
			};
			this.dialogVisible = true;
			this.state = "edit";
		},
		getapilist() {
			this.$axios.post("/apiserve/getapi").then((res) => {
				if (res.code === 200) {
					if (res.body) {
						this.tableData = res.body;
					}
				}
			});
		},
		setdelete(row) {
			this.$axios.post("/apiserve/deleteapi", { id: row._id }).then((res) => {
				if (res.code === 200) {
					if (res.body) {
						this.reload();
						this.getapilist();
					}
				}
			});
		},
		setapi() {
			this.$refs["searchForm"].validate((valid) => {
				if (valid) {
					if (this.state == "add") {
						this.$axios.post("/apiserve/addapi", this.apiForm).then((res) => {
							if (res.code === 200) {
								if (res.body) {
									this.reload();
									this.getapilist();
								}
							}
						});
					}
					if (this.state == "edit") {
						this.$axios.post("/apiserve/editapi", this.apiForm).then((res) => {
							if (res.code === 200) {
								if (res.body) {
									this.reload();
									this.getapilist();
								}
							}
						});
					}
				}
			});
		},
		testapi() {
			this.$refs["searchForm"].validate((valid) => {
				if (valid) {
					this.$axios
						.post("/apiserve/testconnect", this.apiForm)
						.then((res) => {
							if (res.code === 200) {
								if (res.body == "连接成功") {
									this.$message.success(res.body);
									this.hadtest = true;
								} else {
									this.$message.error(res.body);
									this.hadtest = false;
								}
							}
						});
				}
			});
		},
	},
};
</script>

<style lang="stylus" scoped>
.api-create{
    padding: 15px
}
.dialog{
    .el-form--inline .el-form-item{
        display: block;
    }
}
</style>
